<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<!-- head 头部-->
<head th:replace="admin/layout/include::head('菜单管理','')"></head>

<body>
<!-- loading 动画-->
<div th:replace="admin/layout/include::loading"></div>
<!-- 正文开始 -->
<div class="layui-fluid">
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-form toolbar">
            <div class="pull-left layui-form-pane search-box">

                <div class="layui-inline">

                    <label class="layui-form-label w-auto">搜索：</label>
                    <div class="layui-input-inline mr0">
                        <input id="edtSearch" class="layui-input" type="text" placeholder="输入关键字"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <button id="btnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
                    <button id="btnAdd" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
                    <button id="expendAll" class="layui-btn icon-btn ">全部展开</button>
                    <button id="closeAll" class="layui-btn icon-btn ">全部折叠</button>
                </div>
            </div>


        </div>

        <!-- 数据表格 -->
        <table class="layui-table" id="data-table" lay-filter="data-table"></table>
    </div>
</div>
</div>
<!-- 表格操作列 -->
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" ajax-event="del" ajax-url="" value="{{d.id}}" >删除</a>
</script>
<!-- js部分 -->
<div th:replace="admin/layout/include::js"></div>
<script>
    layui.use(['form', 'table', 'util', 'admin', 'treeTable'], function () {
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        var util = layui.util;
        var admin = layui.admin;
        var treeTable = layui.treeTable;
        var insTb = treeTable.render({
            elem: '#data-table',
            tree: {
                isPidData:true,
                iconIndex: 1, // 是否是pid形式数据
                idName: 'id',
                pidName: 'parentId'
            },
            height : 'full-160',
            reqData: function(data, callback) {
                // 在这里写ajax请求，通过callback方法回调数据
                $.get('/admin/menu/tree', function (res) {
                    callback(res.data);  // 参数是数组类型
                });
            },
            cols: [
                    {type: 'checkbox'},
                    {field: 'menuName', minWidth: 180, title: '菜单名称'},
                    {field: 'permissionCode', title: '权限标识'},
                    {field: 'url', title: '菜单url'},
                    {field: 'sort', width: 80, align: 'center', title: '排序号'},
                    {
                        field: 'type', width: 80, align: 'center', templet: function (d) {
                            if (d.type == 2) {
                                return '<span class="layui-badge layui-bg-gray">按钮</span>';
                            }
                            if (d.parentId == 1) {
                                return '<span class="layui-badge layui-bg-blue">目录</span>';
                            } else {
                                return '<span class="layui-badge-rim">菜单</span>';
                            }
                        }, title: '类型'
                    },
                    {templet: '#tableBar', width: 150, align: 'center', title: '操作'}
                ] ,
            text: {
                none: '<div style="padding: 15px 0;">哎呀，一条数据都没有~</div>'
            }
        });
        // 添加按钮点击事件
        $('#btnAdd').click(function () {
            showEditModel();
        });
        $('#expendAll').click(function () {
            insTb.expandAll();  // 展开全部
        })
        $('#closeAll').click(function () {
            insTb.foldAll();  // 折叠全部
        })
        // 搜索按钮点击事件
        $('#btnSearch').click(function () {
            var keyword = $('#edtSearch').val();
            insTb.filterData(keyword);   // 根据关键字模糊搜索
        });
        // 工具条点击事件
        treeTable.on('tool(data-table)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') { //修改
                showEditModel(data);
            }
        });
        // 显示表单弹窗
        var showEditModel = function (data) {
            admin.putTempData('t_menu', data);
            admin.putTempData("formOk", false);
            top.layui.admin.open({
                type: 2,
                title: data ? '修改权限' : '添加权限',
                area: ['380px', '500px'],
                content: '/admin/menu/save',
                end: function () {
                    admin.getTempData('formOk') &&  insTb.refresh();  // 成功刷新表格
                }
            });
        };

    });
</script>
</body>
</html>
